﻿@{
    ViewBag.Title = "设置";
    Layout = null;
}
<style type="text/css">
    /* theme */
    .more-theme-list{padding-left:15px;padding-top:20px;margin-bottom:10px}
    .more-theme-item{padding:4px;margin:0 6px 15px 0;display:inline-block;border:1px solid transparent}
    .more-theme-item img{width:80px;height:50px;background:#f5f7f9;box-sizing:border-box;border:1px solid #f5f7f9;cursor:pointer}
    .more-theme-item.active,.more-theme-item:hover{border-color:#5fb878}
    .more-menu-item{color:#595959;height:50px;line-height:50px;font-size:16px;padding:0 25px;border-bottom:1px solid #e8e8e8;font-style:normal;display:block}

    /* menu */
    .more-menu-item:first-child{border-top:1px solid #e8e8e8}
    .more-menu-item:hover{color:#595959;background:#f6f6f6}
    .more-menu-item .layui-icon{font-size:18px;padding-right:10px}
    .more-menu-item:after{color:#8c8c8c;right:16px;content:"\e602";position:absolute;font-family:layui-icon!important}
    .more-menu-item.no-icon:after{display:none}

    /* setting from */
    .set-item-label{height:38px;line-height:38px;padding-left:20px;display:inline-block}
    .set-item-ctrl{height:38px;line-height:38px;display:inline-block}
    .set-item-ctrl>*{margin:0!important}
</style>
<div class="layui-card-header">主题设置</div>
<div class="more-theme-list">
    <div class="more-theme-item active">
        <img src="/scripts/libs/module/img/theme-admin.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-cyan">
        <img src="/scripts/libs/module/img/theme-cyan.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-white">
        <img src="/scripts/libs/module/img/theme-white.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-pink">
        <img src="/scripts/libs/module/img/theme-pink.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-colorful">
        <img src="/scripts/libs/module/img/theme-colorful.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-blue">
        <img src="/scripts/libs/module/img/theme-blue.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-green">
        <img src="/scripts/libs/module/img/theme-green.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-purple">
        <img src="/scripts/libs/module/img/theme-purple.png" />
    </div>
    <div class="more-theme-item" data-theme="theme-red">
        <img src="/scripts/libs/module/img/theme-red.png" />
    </div>
</div>
<script type="text/javascript">
   layui.use(['form', 'admin'], function () {
       var $ = layui.jquery;
       var form = layui.form;
       var admin = layui.admin;
       var setter = admin.setter;
       var $body = $('body');

       // 切换主题
       var $themItem = $('.more-theme-item');
       $themItem.click(function () {
           $themItem.removeClass('active');
           $(this).addClass('active');
           admin.changeTheme($(this).data('theme'));
       });
       var theme = $body.data('theme');
       if (theme) {
           $themItem.removeClass('active');
           $themItem.filter('[data-theme="' + theme + '"]').addClass('active');
       }

       // 关闭/开启页脚
       form.on('switch(setFooter)', function (data) {
           var checked = data.elem.checked;
           admin.putSetting('closeFooter', !checked);
           checked ? $body.removeClass('close-footer') : $body.addClass('close-footer');
       });
       $('#setFooter').prop('checked', !$body.hasClass('close-footer'));

       // 关闭/开启Tab记忆功能
       form.on('switch(setTab)', function (data) {
           layui.index.setTabCache(data.elem.checked);
       });
       $('#setTab').prop('checked', setter.cacheTab);

       // 关闭/开启多标签
       form.on('switch(setMoreTab)', function (data) {
           var checked = data.elem.checked;
           admin.putSetting('pageTabs', checked);
           admin.putTempData('indexTabs', undefined);
           location.reload();
       });
       $('#setMoreTab').prop('checked', setter.pageTabs);

       // 切换Tab自动刷新
       var $mainTab = $('.layui-body>.layui-tab[lay-filter="admin-pagetabs"]');
       form.on('switch(setRefresh)', function (data) {
           var checked = data.elem.checked;
           admin.putSetting('tabAutoRefresh', checked);
           checked ? $mainTab.attr('lay-autoRefresh', 'true') : $mainTab.removeAttr('lay-autoRefresh');
       });
       $('#setRefresh').prop('checked', setter.tabAutoRefresh === true);

       // 导航小三角
       var $leftNav = $('.layui-layout-admin>.layui-side>.layui-side-scroll>.layui-nav');
       form.on('radio(navArrow)', function (data) {
           $leftNav.removeClass('arrow2 arrow3');
           data.value && $leftNav.addClass(data.value);
           admin.putSetting('navArrow', data.value);
       });
       var navArrow = $leftNav.hasClass('arrow2') ? 'arrow2' : $leftNav.hasClass('arrow3') ? 'arrow3' : '';
       $('[name="navArrow"][value="' + navArrow + '"]').prop('checked', true);

       form.render('radio', 'more-set-form');
       form.render('checkbox', 'more-set-form');
   });
</script>